<template lang="html">
  <div id="pageBox">
    <PageNav :navList="navList" :active="active"></PageNav>
    <div class="order-conatiner pd14">
				<div v-for="(item, index) in orderList" :key="index" class="order-list">
					<router-link :to="{path: '/details', query: {id: item.projectId}}">
						<div class="order-list-cover">
							<img :src="item.coverImg" alt="">
						</div>
						<div class="order-list-main">
							<p class="order-title">{{ item.projectTitle }}</p>
              <p class="order-time">{{ item.createTime | parseTime }}</p>
						</div>
            <div class="money">
              <span class="money-main">实付:￥{{ '￥' + item.actualPrice || 0}}</span>
              <span class="money-col">应付:￥{{ item.totalPrice }} &nbsp 卡券抵扣:￥{{ item.discountPrice }}</span>
            </div>
					</router-link>
				</div>
        <div v-if="!lastPage" class="loadingMore" @click="onMore">
          加载更多
        </div>
			</div>
  </div>
</template>

<script>
import PageNav from "@/components/pageNav";
import { getOrder } from '@/api/order'
export default {
  components:{
    PageNav
  },
  data(){
    return {
      navList:["自购订单","推广订单"],
      orderList: [],
      active: 1,
      form: {
        page: 1,
        limit: 10
      },
    }
  },
  computed: {
    lastPage() {
      return this.orderList.length < this.form.page * this.form.limit
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getOrder(this.form).then(res => {
        this.orderList = this.orderList.concat(res.page.list || [])
      })
    },
    onMore() {
      this.form.page++
      this.getList()
    }
  },
}
</script>


<style lang="less" scoped>
	.order-conatiner{
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.order-list{
		overflow: hidden;
		margin-bottom: 20px;
		a{
			display: block;
			overflow: hidden;
		}
	}
	.order-list-cover{
		float: left;
		width: 1.64rem;
		height: 1rem;
		float: left;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.order-list-main{
		padding-left: 1.77rem;
	}
	.order-title{
		font-weight: bold;
		font-size: 0.16rem;
		line-height: 2;
		color: #333;
  }
  .order-time{
    font-size: 0.13rem;
    color: #999;
    margin-top: .1rem;
  }
  .money{
    overflow: hidden;
    text-align: right;
    clear: both;
    padding-top: .06rem;
    .money-col{
      float: left;
      color: #999;
      font-size: .14rem;
      line-height: .3rem;
    }
    .money-main{
      font-size: .16rem;
      line-height: .3rem;
      color: #5b8c00;
    }
  }
</style>